<template>
    <div class="main-left-menu">
        <h3>YChat</h3>
        <n-upload @finish="uploadSuccess" @before-upload="beforeUnload" :show-file-list="false" :headers="{
            Authorization: ui.token,
        }" :action="`${mainApi}/upload/profile`">
            <n-spin :show="ui.isLoading">
                <div style="width: 64px;height: 64px;;display: flex;justify-content: center;align-items: center;">
                    <img :src="`${imageApi}/${ui.user.profile}`" />
                </div>
            </n-spin>
        </n-upload>
        <div class="left-menu">
            <n-menu :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { MenuOption, MessageReactive, NIcon } from 'naive-ui';
import { ChatboxOutline } from '@vicons/ionicons5'
import { Component, h } from 'vue';
import { userStore } from '../store/userStore';
import { imageApi, mainApi } from '../api/request';

const menuOptions: MenuOption[] = [
    {
        label: '且听风吟',
        key: 'chat',
        icon() {
            return renderIcon(ChatboxOutline)
        }
    },
]
const ui = userStore()

function renderIcon(icon: Component) {
    return h(NIcon, null, { default: () => h(icon) })
}

let uploadMessage: MessageReactive
const uploadSuccess = () => {
    ui.refreshUserInfo()
    uploadMessage?.destroy()
    window.message.success("更新完成")
}

const beforeUnload = () => {
    ui.setLoading(true)
    uploadMessage = window.message.loading("更新中", { duration: 30000 })
}

</script>

<style lang="scss" scoped>
.main-left-menu {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    .n-upload-trigger {
        padding: 10px !important;
    }

    img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 0 0 5px 1px #1f1f1f94;
        margin: 15px 0;
        object-fit: cover;
    }
}
</style>